<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@include file="/comm/header.jsp"%>
<div class="container">
    <div id="toolbar">
        <div class="input-group" style="float: right;">
            <button type="button" class="btn btn-success add"><i class="glyphicon glyphicon-plus"></i> 添加员工</button>
            <button type="button" class="btn btn-success grant"><i class="glyphicon glyphicon-user"></i>角色授权</button>
        </div>
    </div>
    <table id="roleTb"
            data-toggle="table"
            data-url="${ctx}/sys/role/list"
            data-striped="true"
           data-toolbar="#toolbar"
            >
        <thead>
        <tr>
            <th data-radio="true"></th>
            <th data-field="name">角色名称</th>
            <th data-field="level">角色等级</th>
            <th data-formatter="caozuo" data-events="eve">操作</th>
        </tr>
        </thead>
    </table>
    <div class="modal fade" id="myModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel">添加角色</h4>
                </div>
                <div class="modal-body">
                    <form id="add" class="form-horizontal">
                        <div class="form-group">
                            <label class="control-label col-md-3">角色名称：</label>
                            <div class="col-md-8">
                                <input type="text" name="name" class="form-control"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-md-3">角色等级：</label>
                            <div class="col-md-8">
                                <input type="text" name="level" class="form-control"/>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default"
                            data-dismiss="modal">关闭
                    </button>
                    <button type="button" class="btn btn-primary doadd">
                        添加
                    </button>
                </div>
            </div>
        </div>
    </div>




    <div class="modal fade" id="myModal2">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" >修改等级:</h4>
                </div>
                <div class="modal-body">
                    <form id="update" class="form-horizontal">
                        <input type="hidden" name="id">
                        <div class="form-group">
                            <label class="control-label col-md-3">角色名称：</label>
                            <div class="col-md-8">
                                <input type="text" name="name" class="form-control"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-md-3">角色等级：</label>
                            <div class="col-md-8">
                                <input type="text" name="level" class="form-control"/>
                            </div>
                        </div>
                    </form>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default"
                            data-dismiss="modal">关闭
                    </button>
                    <button type="button" class="btn btn-primary doupdate">
                        修改
                    </button>
                </div>
            </div>
        </div>
    </div>


<%@include file="/comm/footer.jsp"%>
<script src="${ctx}/static/js/role.js"></script>


        <script>
            function caozuo() {
                var del = '<button class="btn btn-danger del">删除</button>';
                var update = '<button class="btn btn-info update">修改</button>';
                return del+"&emsp;"+update
            }
            $(".add").bind("click",function () {
                $("#add")[0].reset();
                $("#myModal").modal("show");
            })
            var eve ={
                "click .del":function (event,value,row) {
                    swal({
                        title:"确实要删除么？",
                        text:"该操作不可逆，请谨慎操作！",
                        type:"warning",
                        showConfirmButton:true,
                        showCancelButton:true,
                        confirmButtonText:"确定",
                        cancelButtonText:"取消"
                    }).then(function () {
                        $.post("${ctx}/sys/role/del","id="+row.id,function (msg) {
                            toastr.success(msg);
                            $("#roleTb").bootstrapTable("refresh");
                        },'text')
                    })
                },
                "click .update":function (event,value,row) {
                    $("#myModal2").modal("show");
                    $("#update [name=id]").val(row.id);
                    $("#update [name=name]").val(row.name);
                    $("#update [name=level]").val(row.level);
                }
            }
            $(".doupdate").bind("click",function () {
                var params =$("#update").serialize();
                $.post("${ctx}/sys/role/update",params,function (msg) {
                    toastr.info(msg);
                    $("#myModal2").modal("toggle");
                    $("#roleTb").bootstrapTable("refresh");
                },'text');
            })

            $(".doadd").bind("click",function () {
                var params =$("#add").serialize();
                $.post("${ctx}/sys/role/add",params,function (msg) {
                    toastr.info(msg);
                    $("#myModal").modal("toggle");
                    $("#roleTb").bootstrapTable("refresh");
                },'text');
            })





        </script>